<script>
import AmountInput from '@/components/amountInput'

export const FormStruct = {
  name: '',
  relationship: '',
  age: '',
  workplace: '',
  political: null,
  career: '',
  phone: ''
}

export default {
  components: {
    AmountInput
  },
  props: {
    value: {
      type: Object,
      required: true,
      default() {
        return null
      }
    },
    politicalOptions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      validate: null, // Form 的校验函数
      resetFields: null, // 重置函数
      formRules: {
        name: [{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }],
        relationship: [{ required: true, message: '关系不能为空', trigger: ['blur', 'change'] }]
      }
      // form:{
      //     name:'',
      //     relationship:'',
      //     age:'',
      //     workplace:'',
      //     political:null,
      //     career:'',
      //     phone:''
      // }
    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(form) {
        console.log('change', form)
        this.$emit('input', { ...form })
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }

      attrs['model'] = this.form
      attrs['rules'] = this.formRules

      const unnecessaryAttrs = [
        'layout'
      ]

      for (const attr of unnecessaryAttrs) { delete attrs[attr] }

      return attrs
    },
    colSpan() {
      return this.layout === 'horizontal' ? 12 : 24
    }
  },
  mounted() {
    this.validate = this.$refs.form?.validate
    this.resetFields = this.$refs.form?.resetFields
  },
  methods: {
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          console.log('valid --------->', valid)
          if (!valid) resolve(false)
          resolve(true)
        })
      })
    }
  }
}
</script>

<template>
  <div class="educational-experience-container">
    <el-form
      ref="form"
      v-bind="attrs"
    >

      <el-row :gutter="36">
        <el-col :span="colSpan">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写成员姓名"
            />
          </el-form-item>

          <el-form-item label="与成员的关系" prop="relationship">
            <el-input
              v-model="form.relationship"
              placeholder="请填写与成员的关系"
            />
          </el-form-item>

          <el-form-item label="成员年龄" prop="age">
            <el-input
              v-model="form.age"
              placeholder="请填写成员年龄"
            />
          </el-form-item>

          <el-form-item label="工作地址" prop="workplace">
            <el-input
              v-model="form.workplace"
              placeholder="请填写成员工作地址"
            />
          </el-form-item>

          <el-form-item label="政治面貌" prop="political">
            <el-select
              v-model="form.political"
              placeholder="请选择成员政治面貌"
              style="width: 100%;"
            >
              <el-option
                v-for="option in politicalOptions"
                :key="option.value.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="colSpan">

          <el-form-item label="职业" prop="career">
            <el-input
              v-model="form.career"
              placeholder="请填写职业"
            />
          </el-form-item>

          <el-form-item label="成员电话" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请填写成员电话"
            />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<style lang="scss">
</style>
